<template>
  <el-container>
    <el-main>
      <div id="main" style="width: 1500px;height: 700px;"></div>
    </el-main>
  </el-container>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: 'PersonWrite',
    methods:{
      drawPie(id){
        this.charts = echarts.init(document.getElementById(id))
        this.charts.setOption({
          title: {
            text: '高产博主（user_id）',
            subtext: '高产博主',
            left: 'left'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            top: 'bottom',
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              magicType: {
                show: true,
                type: ['pie', 'funnel']
              },
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          series: [
            {
              name: '面积模式',
              type: 'pie',
              radius: [30, 250],
              center: ['40%', '50%'],
              roseType: 'area',
              data: [
                {value: 32, name: 'userId:1'},
                {value: 30, name: 'userId:10'},
                {value: 29, name: 'userId:11'},
                {value: 26, name: 'userId:1102490522829717504'},
                {value: 22, name: 'userId:1102561962748805120'},
                {value: 19, name: 'userId:1103195673450250240'},
                {value: 17, name: 'userId:1105045287866466304'},
                {value: 17, name: 'userId:1105093883106164736'},
                {value: 16, name: 'userId:1105105185656537088'},
                {value: 16, name: 'userId:1106396183141548032'}
              ]
            }
          ]
        })
      }
    },
    //调用
    mounted(){
      this.$nextTick(function() {
        this.drawPie('main')
      })
    }
  }
</script>

<style scoped>

</style>
